<template>
    <div class="w">
    <div class="xiaox">
        <div>
                <el-input placeholder="搜索" prefix-icon="el-icon-search"
                          clearable
                          style="float:left;width: 200px;margin: 10px"
                           :disabled="true"></el-input>
            <i class="el-icon-plus" style="font-size: 25px;margin: 15px"></i>
            </div>
        <div class="xinxi">
            <ul>
                <li  v-for="(value,index) in msgList">
                    <div @click="opsChatFrame(value)">
                    <img :src="value.img" style="width: 50px;height: 50px">
                    <p class="p1">{{value.name}}</p>
                    <p class="p2" >{{value.msg}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
    import Bus from "@/common/evenBus"
    import {whoAmI} from "@/api/api";
    export default {
        data:function() {
            return {
                netData:{},
                tmp:{},
                msgList: [
                    // {
                    //     "img":"http://tvax4.sinaimg.cn/crop.0.0.480.480.180/768c39d5ly8fjje1d0teej20dc0dcq35.jpg",
                    //     "name":"bb",
                    //     "msg":"干嘛呢？",
                    //     "chatType":"S",
                    //     "id":"2"
                    // },
                    // {
                    //     "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-76cc84e34b13b34f95f8b863dac9b13b_fhd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618298228&t=6be7d2595ba84e722a22bf49c3844c9c",
                    //     "name":"cc",
                    //     "msg":"吃了吗？",
                    //     "chatType":"S",
                    //     "id":"3"
                    // },
                    {
                        "img":"/img/group-icon.jpg",
                        "name":"在线群聊",
                        "msg":"",
                        "receiverId":"1711650811",
                        "senderId":"1711650811",
                        "chatType":"G"
                    }
                ]
            }
        },
        name: "MsgList",
        created() {
            let mySelfId =JSON.parse( sessionStorage.getItem("mockUser")).id;
            //
         // localStorage.removeItem("msgList")
            // this._loadEmojiData();
            if (localStorage.getItem("msgList")!=null) {
                this.msgList = JSON.parse(localStorage.getItem("msgList"));
                for (var i =0; i<this.msgList.length; i++) {
                    // if (this.msgList[i].receiverId==mySelfId){
                    //     this.msgList.splice(i,1)
                    //     i--
                    //     console.log(this.msgList)
                    //     continue;
                    //
                    // }
                    if (this.msgList[i].receiverId==this.msgList[i].senderId&&this.msgList[i].senderId!="1711650811"){
                        this.msgList.splice(i,1)
                        i--

                        //console.log(this.msgList)
                        continue;
                    }
                    if (this.msgList[i].receiverId!=mySelfId&&this.msgList[i].senderId!=mySelfId&&(this.msgList[i].chatType==null||this.msgList[i].chatType!='G')) {

                        //this.msgList.splice(i,1);
                        // this.msgList[i]=null;
                        this.msgList.splice(i,1)
                        i--
                        continue;
                    }
                }

                for (var i =0; i<this.msgList.length; i++) {
                   // break;
                    this.tmp=this.msgList[i]
                    if(this.msgList[i].receiverId==mySelfId){
                        const cdata={
                            id:this.msgList[i].senderId
                        }
                       // console.log("74--msglist---")
                        if ((this.msgList[i].chatType=='S'||this.msgList[i].chatType==null)) {
                          //  console.log("i:"+i+"=====105")
                            whoAmI(cdata).then(res => {
                              //  console.log("76--msglist---")
                              //  console.log(res.errcode)
                                if (res.errcode == 0) {
                                  //  console.log("78--msglist---")

                                    //发放变接房
                                    this.netData = {
                                        "img": res.data.avatar,
                                        "name": res.data.userName,
                                        "msg": this.tmp.msg,
                                        "chatType": 'S',
                                        "senderId": this.tmp.receiverId,
                                         "receiverId": this.tmp.senderId
                                    }
                                    // console.log("120==this.netData")
                                    // console.log(this.netData)
//                                 1、a
//                                 起始元素的位置，从1开始；
//
// 2、b
//                                 要删除的元素个数，从起始元素开始算
//                                 3、c后面的是要插入的元素，可以是数组
                                    this.msgList.splice(i-1, 1)
                                   //this.msgList=this.msgList;
                                    this.msgList.push(this.netData)
                                    //this.msgList[i]=this.netData
                                    // console.log("====90==this.msgList==")
                                    // console.log(this.msgList)
                                }
                            }).catch(e => {
                                console.log("请求错误");
                                console.log(e);
                                //自己的业务逻辑代码：服务端返回的异常都封装在了e里面
                            });
                        }
                        // console.log("93--msglist---")
                        // console.log(this.msgList[i])
                    }
                }
            }
        },
        mounted() {

            Bus.$on("newMsg", (message) => {
                //假设为新增
                // let mockUser = JSON.parse(sessionStorage.getItem("mockUser"));
               //  console.log("==更新消息列表=====")
               //  console.log(message)
               //  console.log("==当前mdgList消息列表=====")
               //  console.log(this.msgList)
                this.netData = message;
                // if (localStorage.getItem("msgList") != null) {
                //     console.log("不应该执行才对====")
                //
                //     this.msgList = JSON.parse(localStorage.getItem("msgList"));
                // }
                // if (this.msgList.length < 2) {
                //     this.msgList.push(message)
                //     localStorage.setItem("msgList", JSON.stringify(this.msgList));
                // } else {
                    //a--b/b--a=======有就更新，没有就添加
                    var flag = false;//先假设没有
                    for (var i = 0; i < this.msgList.length; i++) {
                        var obj = this.msgList[i];
                        if (obj.chatType == 'G' && message.type == 'G') {
                            this.msgList[i].msg = message.content;
                            flag = true;
                            break;
                        } else {
                            if (obj.senderId + obj.receiverId == message.senderId + message.receiverId) {
                                obj.msg = message.content;
                                flag = true;
                                break;
                            }
                        }
                    }
                    if (!flag) {
                        const cdata = {
                            id: message.receiverId
                            //+ message.senderId - JSON.parse(sessionStorage.getItem("mockUser")).id
                        }
                        if (this.netData.type == 'S' || this.netData.type == null) {
                            whoAmI(cdata).then(res => {
                                if (res.errcode == 0) {
                                 //   console.log("160====msgLIst===")
                                    const data1 = {
                                        "img": res.data.avatar,
                                        "name": res.data.userName,
                                        "msg": this.netData.content,
                                        "chatType": this.netData.type,
                                        "senderId": JSON.parse(sessionStorage.getItem("mockUser")).id,
                                        "receiverId": cdata.id
                                    }
                                    this.msgList.push(data1)
                                    localStorage.setItem("msgList", JSON.stringify(this.msgList));
                                }
                            })
                        }
                    }

            });
        },





              /*
                var flag=true;
                //一条消息重复添加三次
                for (var i =0; i<this.msgList.length; i++) {
                    var obj=this.msgList[i];
                    if (obj.chatType=='G'&&message.type=='G'){
                        this.msgList[i].msg=message.content;
                        flag=false;
                    }else {
                        if (
                            obj.senderId+obj.receiverId==message.senderId+message.receiverId
                        // (message.senderId==obj.senderId||message.senderId==obj.receiverId)&&
                        // (message.receiverId==obj.senderId||message.receiverId==obj.receiverId)
                        ){
                            //  if (obj.senderId==mockUser.id||obj.receiverId==mockUser.id){
                            obj.msg=message.content;
                            flag=false;
                        }
                    }

                }
                if (flag){
                    const cdata={
                        id:message.receiverId+message.senderId-JSON.parse(sessionStorage.getItem("mockUser")).id
                    }
                    if (this.netData.type=='S'||this.netData.type==null) {
                        whoAmI(cdata).then(res => {
                            if (res.errcode == 0) {

                                 console.log( "160====msgLIst===")
                                const data1 = {
                                    "img": res.data.avatar,
                                    "name": res.data.username,
                                    "msg": this.netData.content,
                                    "chatType": this.netData.type,
                                    "senderId": JSON.parse(sessionStorage.getItem("mockUser")).id,
                                    "receiverId": cdata.id
                                }
                                //消息列表引入本地存储
                                //var flag=true;
                                if (localStorage.getItem("msgList") != null) {
                                    this.msgList = JSON.parse(localStorage.getItem("msgList"));
                                    console.log("173=======")
                                    console.log(this.msgList)
                                    this.msgList.push(data1);
                                    localStorage.setItem("msgList", JSON.stringify(this.msgList));
                                } else {
                                    console.log("177=======")

                                    this.msgList.push(data1);
                                    console.log(this.msgList)
                                    localStorage.setItem("msgList", JSON.stringify(this.msgList));
                                }
                                // for(var i=0;i<this.msgList.length;i++){
                                //     if(this.msgList[i].id==obj.id){
                                //         flag=false;
                                //     }
                                // }
                                // if (flag){
                                //     this.msgList.push(data1);
                                // }
                                // localStorage.setItem("friendList",JSON.stringify(this.friendList));
                                // this.msgList.push(data1);
                                // console.log("91-msglist====")
                                // console.log(this.msgList)
                            }
                        }).catch(e => {
                            console.log("请求错误");
                            console.log(e);
                            //自己的业务逻辑代码：服务端返回的异常都封装在了e里面
                        });
                    }
                }*/


        methods: {
            opsChatFrame: function (obj) {
                //console.log(obj)
                if (obj.chatType=='S'||obj.chatType==null){
                    const data={
                        currentChatType:'S',
                        bgmFlag:false,
                        chatFrameFlag:true,
                        GpersonFrameFlag:false,
                        title:obj.name,
                        titleImg:obj.img,
                        //id是收方
                        receiverId:obj.receiverId,
                        senderId:JSON.parse(sessionStorage.getItem("mockUser")).id
                    }
                    Bus.$emit("singlechat",data);
                }else {
                    const data={
                        currentChatType:'G',
                        bgmFlag:false,
                        chatFrameFlag:true,
                        GpersonFrameFlag:true,
                        title:obj.name,
                        titleImg:obj.img,
                        receiverId:obj.receiverId,
                        senderId:0
                    }
                    Bus.$emit("groupchat",data);
                }
            }
        }
    }
</script>

<style scoped>

    .xinxi ul{
        margin-top: 24px;
    }
    .xinxi ul li img{
        /* position: absolute; */
        top: 0px!important;
        position: relative!important;
        float: left!important;
    }


   /deep/ .w{
        /*width:280px;*/
        display: flex;
        flex-direction: column;
        width:40%;
        height:100%;
        /*margin: 0 auto;*/
        margin-left: 10px;
        background: url('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1582078906&di=521994f8f7678aa8e1fb1e0e9a2041a8&src=http://www.boruisz.com/images/nfwwoltcnfwwolrrgi3c43tfoq/photo/at2muybh9vWDBApWPoqvoQ==/319192623590568241.jpg')no-repeat -15px -102px;
        background-size: 121% 110%;;
        box-shadow: 0px 1px 7px 1px #969595;
    }
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .active{
        border-bottom: 2px solid #818186;
        color: #585858;
    }

    .mulu{
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #f4f4f4;
    }
    .one,.two,.three{
        width: 65px;
        height: 40px;
        display: block;
        margin-right:20px;
        float: left;
        color: #818185;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        padding: 0 4px;
    }

    .list{
        margin-top: 10px;
        overflow: hidden;
    }
    .list li a{
        float: left;
        font-size: 15px;
        color: #747479;
        padding: 5px 10px;
        margin:0 7px;

    }
    .list span{
        float: right;
        margin-right: 10px;
        line-height: 35px;
    }
    .list span img{
        width: 42px;
        height: 22px;
    }
    .pengyou ul li{
        padding: 10px;
        width:93%;
    }
    .pengyou ul li span{
        font-size: 14px;
        color: #000;

    }
    .pengyou li:hover{
        background: rgba(247, 247, 247, 0.18);
    }
    .pengyou p span{
        margin-right: 10px;
        margin-left: 10px;
    }
    .concat{
        width: 100%;
    }
    .con{
        overflow: hidden;
    }
    .con img{
        width:40px;
        height: 40px;
        border-radius: 50%;
        float: left;
    }
    .lis{
        overflow: hidden;
        float: left;
        margin-left: 15px;
    }
    .lis p:first-child{
        font-size: 14px;
    }
    .lis p:nth-child(2){
        font-size: 12px;
        color: #585858;
    }
    .xiaox{
        width: 100%;
    }
    .xiaox ul{
        overflow: hidden;
    }
    .xiaox ul li{
        float: left;
    }
    .nav li a{
        display: block;
        height: 136px;
        width: 140px;
    }
    .xinxi{
        width:100%;
    }

    .xinxi ul li{
        padding-left: 15px;
        height: 60px;
        width: 265px;
        position: relative;
    }

    .xinxi ul li img{
        width: 40px;
        height: 40px;
        position: absolute;
        border-radius: 50%;
        top: 10px;
    }
    .xinxi ul li:hover{
        background: rgba(130, 128, 128, 0.18);
    }
    .p1{
        color: #000;
        position: absolute;
        left: 70px;
        font-size: 15px;
        font-family: '微软雅黑';
        top: 0px;
    }
    .xinxi ul li:nth-child(3) .p1{
        color: #ff0000;
    }
    .xinxi ul li:last-child .p1{
        color: #ff0000;
    }
    .p2{
        color: #7e7d7d;
        position: absolute;
        left: 70px;
        top:30px;
        font-size: 12px;
    }
    .xinxi ul li span{
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 12px;
        color: #7f7f7f;
    }

    .group{
        margin-top:10px;
        margin-left:20px;
        margin-right:20px;
    }
    .group span{
        margin-right:10px;
        font-size:14px;
        color: #000;
    }
    .main{
        overflow: hidden;
    }
    .concat li{
        width: 100%;
    }
    .main li img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: block;
        float: left;
    }
    .main li p{
        font-size: 16px;
        float: left;
        margin-left: 10px;
        line-height: 20px;
    }
    .main li p:last-child{
        font-size: 12px;
        color: #7f7f7f;
        float: right;
    }

</style>
